<template>
  <div class="body">
    <div class="body-avatar">
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" ref="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <el-button type="primary" style="top:480px;left: 500px;" @click="reset">更换头像</el-button>
    <el-button type="primary" style="top:550px;left: 490px" @click="upload">确认上传</el-button>

    <div class="body-info">
      <h2>用户通行证: {{userAccount}}</h2>
      <h2>用户昵称: {{username}}</h2>
      <h2>用户电子邮箱: {{userEmail}}</h2>
      <h2>用户手机号码：{{userPhoneNumber}}</h2>
      <h2>用户当前余额：{{userBalance}}</h2>
      <h2>用户注册类型: {{type}}</h2>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      imageUrl :'',

      userAccount :'',
      username :'',
      userEmail :'',
      userPhoneNumber :'',
      userBalance :'',
      type :'',
    }
  },

  methods: {
     handleAvatarSuccess(res, file) {
        //blob 转化 base64
        var reader = new FileReader()
          reader.readAsDataURL(file.raw)
          reader.onload = () => {
            // base64 存为 src 属性值并传入后端
            this.imageUrl = reader.result
          }
          reader.onerror = function (error) {
            console.log('Error: ', error)
          }
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        console.log(file);
        return isJPG && isLt2M;
      },

      reset(){
        this.imageUrl = ''
      },

      async upload(){
        const res = await this.$http.post('',{
          userAccount : window.sessionStorage.getItem('userAccount'),
          userPic : this.imageUrl
        })

        if(res.data.status === 0){
          this.$message({
            message: '头像上传成功'
          })
        }
      }
  },

  created:async function(){


    this.userAccount = window.sessionStorage.getItem('userAccount')
    const res = await this.$http.post('user/queryUserPic',{
      userAccount : window.sessionStorage.getItem('userAccount')
    })

    this.imageUrl = res.data.data

    const res2 = await this.$http.post('user/userInfoQuery',{
      userAccount : window.sessionStorage.getItem('userAccount')
    })

    this.username = res2.data.data.username
    this.userEmail =res2.data.data.email
    this.userPhoneNumber =res2.data.data.phoneNumber
    this.userBalance =res2.data.data.balance
    this.type =res2.data.data.userType
  } 
}

</script>

<style>
.body{
  width: 80%;
  height: 70%;

  background-color: white;
  opacity: 0.8;

  margin-top: 100px;
  margin-left: 200px;
  border-radius:15px;
}

.body-avatar{
  margin-left: 140px;
  padding-top: 50px;
}

.el-upload{
  width: 262px;
  height: 262px;

  text-align: center;
}

.el-upload>i{
  margin-top: 110px;
}

.body-info{
  position: absolute;
  top: 170px;
  right: 400px;

  Line-height:80px;
}
</style>